/* eslint-disable no-const-assign */
<template>
  <div class="home-list">
    <el-row
      :gutter="20"
      class="bg-cf bs flex-align-center"
      style="margin-left: 0; margin-right: 0"
    >
      <el-col :span="6"
        ><div class="grid-content cp" @click="popupDialog(2)">
          <p class="p-mb">今日收入</p>
          <el-progress
            type="circle"
            color="#6666CC"
            :percentage="showschedule(incomeData.today_income)"
          >
            <template #default>
              <span class="percentage-value">
                <span style="font-size: 14px">￥</span
                >{{ incomeData.today_income }}</span
              >
            </template>
          </el-progress>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple cp" @click="popupDialog(3)">
          <p class="p-mb">本周收入</p>
          <el-progress
            type="circle"
            color="#7ABECC"
            :percentage="showschedule(incomeData.week_income)"
          >
            <template #default>
              <span class="percentage-value">
                <span style="font-size: 14px">￥</span
                >{{ incomeData.week_income }}</span
              >
            </template>
          </el-progress>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple cp" @click="popupDialog(4)">
          <p class="p-mb">本月收入</p>
          <el-progress
            type="circle"
            color="#679AFF"
            :percentage="showschedule(incomeData.month_income)"
          >
            <template #default>
              <span class="percentage-value">
                <span style="font-size: 14px">￥</span
                >{{ incomeData.month_income }}</span
              >
            </template>
          </el-progress>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple cp" @click="popupDialog(1)">
          <p class="p-mb">累计收入</p>
          <el-progress
            type="circle"
            color="#F2C261"
            :percentage="incomeData.total_income ? 100 : 0"
          >
            <template #default>
              <span class="percentage-value">
                <span style="font-size: 14px">￥</span
                >{{ incomeData.total_income }}</span
              >
            </template>
          </el-progress>
        </div></el-col
      >
    </el-row>
    <div class="transition flex flex-jus flex-align-center">
      <div>
        <img src="@/assets/img/icon/home/home-88.svg" alt="" />
        <span>在线咨询</span>
      </div>
      <div class="right flex flex-align-center">
        <div
          class="text-center ml-38 cp"
          :class="tabIndex == index ? 'c-active' : 'c6'"
          v-for="(item, index) in tabList"
          :key="item"
          @click="changeTag(index)"
        >
          <p>{{ item.total }}</p>
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
    <div class="list-box">
      <template v-for="(item, index) in state.list" :key="index">
        <currentItem @showChat="showChat" @refuse="refuse" :info="item" />
      </template>
      <!-- :hide-on-single-page="false" -->
      <el-pagination
        class="pagination"
        :current-page="page"
        background
        :page-size="limit"
        layout="prev, pager, next"
        @current-change="changePage"
        :hide-on-single-page="true"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 收入情况的弹窗 -->
    <h-diaog
      v-model:showDialog="showDialog"
      :values="values"
      :diaLogTitle="diaLogTitle"
      :incomeData="incomeData"
    >
    </h-diaog>

    <!-- 聊天框的弹窗 -->
    <div class="chat">
      <el-dialog
        v-model="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <chatBox @hide="dialogVisible = false"></chatBox>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, computed } from 'vue'
import {
  DoctorIncome,
  GetAppointmentUserList,
  AppointmentCheck
} from '@/service/api/doctor'
import { IAppointmentCheck } from '@/service/api/doctor/type'
import currentItem from './currentItem.vue'
import HDiaog from '../cpns/h-dialog.vue'
import chatBox from '@/components/chatBox'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'homeList',
  components: {
    currentItem,
    HDiaog,
    chatBox
  },
  setup() {
    let tabIndex = ref(0)
    let showDialog = ref(false)
    let limit = ref(4)
    let total = ref(0)
    let page = ref(1)
    let values = ref(2)
    let dialogVisible = ref(false)
    let diaLogTitle = ref('')
    const state = reactive({
      list: []
    })
    let incomeData = {
      month_income: 0.0,
      today_income: 0.0,
      total_income: 0.0,
      week_income: 0.0
    }
    const tabList = ref([
      {
        total: 99,
        title: '待咨询',
        status: 4
      },
      {
        total: 10,
        title: '正在咨询',
        status: 2
      },
      {
        total: 99,
        title: '已咨询',
        status: 3
      }
    ])
    const popupDialog = (num: number) => {
      showDialog.value = true
      values.value = num
      switch (num) {
        case 1:
          diaLogTitle.value = '累计收入'
          break
        case 2:
          diaLogTitle.value = '今日收入'
          break
        case 3:
          diaLogTitle.value = '本周收入'
          break
        case 4:
          diaLogTitle.value = '本月收入'
          break
        default:
          break
      }
    }
    /**
     * 筛选预约状态
     */
    const changeTag = (index: number) => {
      tabIndex.value = index
      ajaxGetAppointmentUserList()
    }
    /**
     * 显示进度
     */
    const showschedule = computed(() => {
      return (num: number) => {
        if (num) {
          return (num / incomeData.total_income) * 100
        } else {
          return num
        }
      }
    })
    /**
     * 改变页码
     */
    const changePage = (pagenum: number) => {
      console.log(pagenum)
    }
    /**
     * 获取医生收入信息
     */
    const ajaxGetIncome = () => {
      DoctorIncome().then((res) => {
        incomeData = { ...res.data }
      })
    }
    /**
     * 获取用户预约列表
     */
    const ajaxGetAppointmentUserList = () => {
      let posData = {
        page: page.value,
        limit: limit.value,
        status: tabList.value[tabIndex.value].status
      }
      GetAppointmentUserList(posData).then((res) => {
        if (res.code == 200) {
          total.value = res.data.count
          state.list = res.data.list
          tabList.value[0].total = res.data.not_consult
          tabList.value[1].total = res.data.consulting
          tabList.value[2].total = res.data.consulted
        }
      })
    }
    /**
     * 显示聊天框
     */
    const showChat = () => {
      dialogVisible.value = true
    }
    /**
     * 审核用户预约
     */
    const refuse = (postData: IAppointmentCheck) => {
      AppointmentCheck(postData).then((res) => {
        if (res.code == 200) {
          ElMessage.success('操作成功！')
          ajaxGetAppointmentUserList()
        }
      })
    }
    onMounted(() => {
      ajaxGetIncome()
      ajaxGetAppointmentUserList()
    })
    return {
      state,
      showDialog,
      tabIndex,
      diaLogTitle,
      limit,
      total,
      page,
      tabList,
      values,
      dialogVisible,
      incomeData,
      showschedule,
      changeTag,
      popupDialog,
      changePage,
      showChat,
      refuse
    }
  }
})
</script>

<style lang="less" scoped>
.bg-cf {
  background-color: #fff;
  height: 220px;
  border-radius: 8px;
  margin-bottom: 43px;
}
.grid-content {
  text-align: center;
  .p-mb {
    margin-bottom: 14px;
  }
}
.percentage-value {
  font-size: 18px;
}
.transition {
  border-radius: 8px 8px 0 0;
  background-color: #fff;
  padding: 0 35px 0 50px;
  height: 68px;
  color: #5198fe;
  font-size: 20px;
  img {
    width: 26px;
    vertical-align: middle;
    margin-right: 10px;
  }
  .right {
    font-size: 16px;
  }
}

.list-box {
  margin: 20px 0;
  background-color: #fff;
  height: 682px;
  padding: 0 56px;
  .pagination {
    margin-top: 10px;
    text-align: center;
  }
}
.chat :deep(.el-dialog__body) {
  padding: 0;
}
.chat :deep(.el-dialog__header) {
  padding: 0;
}
:deep(.el-button--primary) {
  background: -webkit-linear-gradient(left, #5198fe 0%, #48b4ff 100%);
  //   font-family: Yu Gothic UI;
}
:deep(.el-dialog__body) {
  padding: 20px 0 30px;
}
</style>
